<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02浮动的特点</title>
    <style>
        .box1{
            width: 88px;
            height: 80px;
            background-color: #bfa;
            float: left;
        }
        /* 
            1、浮动元素不会覆盖文字，文字会动环绕在浮动元素周围。
            2、元素脱离文档流以后：
                块元素：——不再独占一行
                        ——宽度和高度默认被内容撑开
                
                行内元素：——行内元素脱离文档流以后，特点和块元素一样

        
        
        
        */
        .s1{
            width: 100px;
            height: 100px;
            float: left;
            background-color: orange;
        }







    </style>
</head>
<body>
    <div class="box1">

    </div>
    <p>
        噫吁嚱，危乎高哉！
蜀道之难，难于上青天！
蚕丛及鱼凫，开国何茫然！
尔来四万八千岁，不与秦塞通人烟。
西当太白有鸟道，可以横绝峨眉巅。
地崩山摧壮士死，然后天梯石栈相钩连。
上有六龙回日之高标，下有冲波逆折之回川。
黄鹤之飞尚不得过，猿猱欲度愁攀援。
青泥何盘盘，百步九折萦岩峦。
扪参历井仰胁息，以手抚膺坐长叹。

问君西游何时还？畏途巉岩不可攀。
但见悲鸟号古木，雄飞雌从绕林间。
又闻子规啼夜月，愁空山。
蜀道之难，难于上青天，使人听此凋朱颜！
连峰去天不盈尺，枯松倒挂倚绝壁。
飞湍瀑流争喧豗，砯崖转石万壑雷。
其险也如此，嗟尔远道之人胡为乎来哉！(也如此 一作：也若此)

剑阁峥嵘而崔嵬，一夫当关，万夫莫开。
所守或匪亲，化为狼与豺。
朝避猛虎，夕避长蛇，磨牙吮血，杀人如麻。
锦城虽云乐，不如早还家。
蜀道之难，难于上青天，侧身西望长咨嗟！
    </p>
    <span class="s1">z张勇是个大帅比</span>
    <span class="s2">这个大帅比就是张勇</span>
    
</body>
</html>